使用 React Hooks 强制重新渲染组件

2024 年 7 月 15 日

在 React Hooks 中,没有像类组件中的 this.forceUpdate() 这样的方式可以强制重新渲染组件。

这里整理了一些替代方案

useState

  const [count, setCount] = useState(0);

  const forceUpdate = () => {
    // 改变状态值以触发重新渲染
    setCount(prevCount => prevCount + 1);
  };

useReducer

const [, forceUpdate] = useReducer((n)=>n + 1, 0);

其他

还可以使用 render(<App>)useSyncExternalStore ,但是频率比较低